<template>
  <div>
    <top-bar></top-bar>
    <left-bar :datas='data'></left-bar>
    <div class="main">

      <div class="main-mains">
        <div class="main-content">
          <div class="main-mains-top">
            用户列表
          </div>
          <div class="screen clear">
            <div class="fl" @click="screen()">筛选</div>
          </div>
          <div class="publicTable toLongTable">
            <table class="head_table">
              <tr>
                <td width="3%">序号</td>
                <td width="7%">用户账号</td>
                <td width='5%'>用户实名</td>
                <td width='12%'>用户身份证号</td>
                <td width='7%'>用户申请角色</td>
                <td width='10%'>申请认证日期</td>
                <td width='7%'>认证资料</td>
                <td width='12%'>所属地区</td>
                <td width="5%">账号状态</td>
                <td width='7%'>操作</td>
              </tr>
            </table>
            <el-scrollbar>
              <table class="content_table">
                <tr v-for="(item,index) in listData" :key="index" :class="{active:index%2==1}">
                  <td width="3%">{{index+1}}</td>
                  <td width="7%">{{item.mobile}}</td>
                  <td width="5%">{{item.user_info.real_name}}</td>
                  <td width="12%">{{item.user_info.idcard_no}}</td>
                  <td width="7%">{{item.role_zh}}</td>
                  <td width="10%">{{item.create_time}}</td>
                  <td width="7%">
                    <span class="active" @click="getDetails(item.user_info.uid)">查看</span>
                  </td>
                  <td width="12%">{{region(item.user_info.province_zh ,item.user_info.city_zh ,item.user_info.area_zh)}}</td>
                  <td width="5%">{{item.status | statusType}}</td>
                  <td width="7%" v-if="item.status==1">
                    <span class="active" @click="frozen(item.user_info.uid)">冻结</span>
                  </td>
                  <td width="7%" v-if="item.status==3">
                    <span class="active" @click="thaw(item.user_info.uid)">恢复</span>
                  </td>
                  <td width="7%" v-if="item.status==2">
                    <span class="active"></span>
                  </td>
                </tr>
              </table>
            </el-scrollbar>
          </div>
          <div class="nodataTip" v-if="showNodataTip">
            <i class="iconfont icon-zanwuneirong"></i>
            <h5>暂无内容</h5>
          </div>
          <div class="orderBotom">
            <div class="orderBotomRight">
              <el-pagination @current-change="handleCurrentChange" :page-size="15" layout="total, prev, pager, next" :total='totalnum'>
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
      <div class="system-menban" v-if="search"></div>
      <div class="systemPopup" v-if="search">
        <div class="topTitle">
          <span>筛选用户</span>
          <i class="el-icon-close system-icon" @click="hideSystemPopup"></i>
        </div>
        <div class="systemPopup-con">
          <div class="systemPopup-cons clear">
            <div class="fl">时间</div>
            <div class="fl sel">
              <el-date-picker value-format="timestamp" v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div class="systemPopup-cons clear">
            <div class="fl">选择角色</div>
            <div class="fl sel">
              <el-select v-model="role" clearable placeholder="请选择认证角色">
                <el-option v-for="item in roleType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="systemPopup-btn clear">
            <div class="fl" @click="searchs()">确认</div>
            <div class="fl" @click="hideSystemPopup">取消</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import leftBar from "@/components/leftBar";
import topBar from "@/components/topBar";
import user from "@/api/user";
export default {
  components: {
    leftBar,
    topBar
  },
  data() {
    return {
      data: "userManagement",
      pages: 1,
      listData: [],
      totalnum: 0,
      showNodataTip: false,
      search: false,
      time: "",
      role: "",
      roleType: []
    };
  },
  methods: {
    screen() {
      this.search = true;
    },
    hideSystemPopup() {
      this.search = false;
    },
    frozen(id) {
      //冻结
      let _this = this;
      _this
        .$confirm("此操作将冻结该账户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          const options = {
            user_id: id,
            status: 3
          };
          user.userStatus(options).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "冻结成功",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消冻结"
          });
        });
    },
    thaw(id) {
      //解冻
      let _this = this;
      _this
        .$confirm("此操作将解冻该账户, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          const options = {
            user_id: id,
            status: 1
          };
          user.userStatus(options).then(res => {
            if (res.code == 1) {
              this.$message({
                showClose: true,
                message: "恢复成功",
                type: "success"
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          _this.$message({
            type: "info",
            message: "已取消解冻"
          });
        });
    },
    region(area1, area2, area3) {
      const areas1 = area1 ? area1 : "";
      const areas2 = area2 ? area2 : "";
      const areas3 = area3 ? area3 : "";
      return areas1 + areas2 + areas3;
    },
    handleCurrentChange(val) {
      this.pages = val;
      this.getList();
    },
    searchs() {
      this.getList();
    },
    getList() {
      this.showNodataTip = false;
      let options;
      if (this.time == null || this.time == "") {
        options = {
          page: this.pages,
          role_id: this.role,
          cts: "",
          cte: ""
        };
      } else {
        options = {
          page: this.pages,
          role_id: this.role,
          cts: this.time[0] / 1000,
          cte: this.time[1] / 1000
        };
      }
      user.getUserList(options).then(res => {
        if (res.code == 1) {
          this.search = false;
          this.listData = res.data.list;
          this.totalnum = res.data.total;
          if (!res.data.total) {
            this.showNodataTip = true;
          }
        }
      });
    },
    getRoleLists() {
      const options = {};
      user.getRoleList(options).then(res => {
        if (res.code == 1) {
          for (let i = 0; i < res.data.list.length; i++) {
            this.roleType.push({
              value: res.data.list[i].id,
              label: res.data.list[i].name
            });
          }
        }
      });
    },
    getDetails(id) {
      this.$router.push("/userInfo/" + id);
    }
  },
  mounted() {
    this.getList();
    this.getRoleLists();
  },
  filters: {
    statusType(val) {
      let type;
      if (val == 1) {
        type = "正常";
      } else if (val == 2) {
        type = "审核中";
      } else if (val == 3) {
        type = "已冻结";
      }
      return type;
    }
  }
};
</script>

<style>
</style>
